<template>
  <div class="footer-main">
    <div class="line"></div>
    <footer-top></footer-top>
    <div class="footer-bottom">
      <footer-bottom></footer-bottom>
      <footer-bottom-record></footer-bottom-record>
    </div>
  </div>
</template>

<script>
import FooterTop from "../footer/FooterTop.vue";
import FooterBottom from "../footer/FooterBottom.vue";
import FooterBottomRecord from "../footer/FooterBottomRecord.vue";

export default {
  name: "Footer",
  components: { FooterTop, FooterBottom, FooterBottomRecord },
  comments: {
    FooterTop,
    FooterBottom,
    FooterBottomRecord,
  },
};
</script>

<style>
.footer-main {
  display: flex;
  flex-direction: column;
}
.line {
  height: 4px;
  width: 100%;
  background: linear-gradient(to left, #8b089d, #1383cc);
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>